<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <title>千锋健康</title>
    <meta content="千锋健康" name="description">
    <meta content="千锋健康" name="keywords">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link href="../plugins/elementui/index.css" rel="stylesheet">
    <link href="../plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .datatable {
            position: relative;
            box-sizing: border-box;
            -webkit-box-flex: 1;
            width: 100%;
            max-width: 100%;
            font-size: 14px;
            color: rgb(96, 98, 102);
            overflow: hidden;
            flex: 1 1 0%;
        }

        .datatable td, .datatable th {
            padding: 12px 0;
            min-width: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
            text-align: left;
        }
    </style>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>预约管理<small>预约列表</small></h1>
        <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><a href="show.html">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item>预约管理</el-breadcrumb-item>
            <el-breadcrumb-item>预约列表</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <div class="filter-container">
                <!--                        placeholder 默认显示字符 keyup.enter.native 回车事件-->
                <el-input @keyup.enter.native="handleFilter" class="filter-item" placeholder="会员名称/预约类型/预约状态/套餐名称"
                          style="width: 300px;" v-model="pagination.queryString"></el-input>
                <el-date-picker
                        v-model="pagination.queryDate"
                        type="date"
                        placeholder="选择日期"
                        style="width: 300px;">
                </el-date-picker>
                <el-button @click="findPage()" class="dalfBut">查询</el-button>
                <el-button @click="handleCreate()" class="butT" type="primary">新建</el-button>
            </div>
            <el-table :data="dataList" current-row-key="id" highlight-current-row size="small" stripe>
                <el-table-column align="center" label="序号" type="index"></el-table-column>
                <el-table-column align="center" label="会员名称" prop="memberName"></el-table-column>
                <el-table-column align="center" label="预约日期" prop="orderDate"></el-table-column>
                <el-table-column align="center" label="预约方式" prop="orderType"></el-table-column>
                <el-table-column align="center" label="预约状态" prop="orderStatus"></el-table-column>
                <el-table-column align="center" label="预约套餐" prop="setMealName"></el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="edit(scope.row)" size="mini" type="primary">编辑</el-button>
                        <el-button @click="del(scope.row.id)" size="mini" type="danger">取消预约</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        :page-sizes="[3,5,10]"
                        :total="pagination.total"
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        class="pagiantion"
                        layout="total,sizes, prev, pager, next, jumper">
                </el-pagination>
            </div>
            <!-- 新增标签弹层 -->
            <div class="add-form">
                <el-dialog :visible.sync="dialogFormVisible" title="新增预约">
                    <template>
                        <el-tabs type="card" v-model="activeName">
                            <el-tab-pane label="基本信息" name="first">
                                <el-form label-position="right" label-width="100px">

                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="会员选择">
                                                <template>
                                                    <el-select clearable placeholder="请选择" v-model="formData.memberId">
                                                        <el-option
                                                                :key="member.id"
                                                                :label="member.name"
                                                                :value="member.id"
                                                                v-for="member in members">
                                                        </el-option>
                                                    </el-select>
                                                </template>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="选择日期">
                                                <template>
                                                    <el-select clearable placeholder="请选择" v-model="formData.orderDate">
                                                        <el-option
                                                                :key="orderDate"
                                                                :label="orderDate"
                                                                :value="orderDate"
                                                                v-for="orderDate in orderDates">
                                                        </el-option>
                                                    </el-select>
                                                </template>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="预约方式">
                                                <el-select clearable placeholder="请选择" v-model="formData.orderType">
                                                    <el-option label="微信预约" value="微信预约"></el-option>
                                                    <el-option label="电话预约" value="电话预约"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="预约状态">
                                                <el-select clearable placeholder="请选择" disabled v-model="formData.orderStatus">
                                                    <el-option label="未到诊" value="未到诊"></el-option>
                                                    <el-option label="已检查" value="已检查"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </el-tab-pane>
                            <el-tab-pane label="套餐详情" name="second">
                                <div class="checkScrol">
                                    <el-select clearable placeholder="请选择" v-model="formData.setMealId">
                                        <el-option
                                                :key="setMeal.id"
                                                :label="setMeal.name"
                                                :value="setMeal.id"
                                                v-for="setMeal in setMeals">
                                        </el-option>
                                    </el-select>
                                    <br/>
                                    <br/>
                                    <table border="1" cellspacing="0" class="datatable">
                                        <thead>
                                        <tr>
                                            <th>套餐名称</th>
                                            <th width="30px">性别</th>
                                            <th>年龄</th>
                                            <th>价格</th>
                                            <th>项目说明</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="setMeal in setMeals">
                                            <td><label :for="setMeal.id">{{setMeal.name}}</label></td>
                                            <td>
                                                <label :for="setMeal.id">
                                                    <span v-if="setMeal.sex==0">不限</span>
                                                    <span v-if="setMeal.sex==1">男</span>
                                                    <span v-if="setMeal.sex==2">女</span>
                                                </label>
                                            </td>
                                            <td><label :for="setMeal.id">{{setMeal.age}}</label></td>
                                            <td><label :for="setMeal.id">{{setMeal.price}}</label></td>
                                            <td><label :for="setMeal.id">{{setMeal.remark}}</label></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </template>
                    <div class="dialog-footer" slot="footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button @click="handleAdd()" type="primary">确定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
<!--        新建标签结束-->

            <!-- 修改标签弹层 -->
            <div class="add-form">
                <el-dialog :visible.sync="dialogEditFormVisible" title="修改预约">
                    <template>
                        <el-tabs type="card" v-model="activeName">
                            <el-tab-pane label="基本信息" name="first">
                                <el-form label-position="right" label-width="100px">
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="会员">
                                                <template>
                                                    <el-select clearable placeholder="请选择" disabled="true" v-model="editForm.memberId">
                                                        <el-option
                                                                :key="member.id"
                                                                :label="member.name"
                                                                :value="member.id"
                                                                v-for="member in members">
                                                        </el-option>
                                                    </el-select>
                                                </template>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="选择日期">
                                                <template>
                                                    <el-select clearable placeholder="请选择" v-model="editForm.orderDate">
                                                        <el-option
                                                                :key="orderDate"
                                                                :label="orderDate"
                                                                :value="orderDate"
                                                                v-for="orderDate in orderDates">
                                                        </el-option>
                                                    </el-select>
                                                </template>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="预约方式">
                                                <el-select clearable placeholder="请选择" v-model="editForm.orderType">
                                                    <el-option label="微信预约" value="微信预约"></el-option>
                                                    <el-option label="电话预约" value="电话预约"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="预约状态">
                                                <el-select clearable placeholder="请选择" v-model="editForm.orderStatus">
                                                    <el-option label="未到诊" value="未到诊"></el-option>
                                                    <el-option label="已检查" value="已检查"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </el-tab-pane>
                            <el-tab-pane label="套餐详情" name="second">
                                <div class="checkScrol">
                                    <el-select clearable placeholder="请选择" v-model="editForm.setMealId">
                                        <el-option
                                                :key="setMeal.id"
                                                :label="setMeal.name"
                                                :value="setMeal.id"
                                                v-for="setMeal in setMeals">
                                        </el-option>
                                    </el-select>
                                    <br/>
                                    <br/>
                                    <table border="1" cellspacing="0" class="datatable">
                                        <thead>
                                        <tr>
                                            <th>套餐名称</th>
                                            <th width="30px">性别</th>
                                            <th>年龄</th>
                                            <th>价格</th>
                                            <th>项目说明</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="setMeal in setMeals">
                                            <td><label :for="setMeal.id">{{setMeal.name}}</label></td>
                                            <td>
                                                <label :for="setMeal.id">
                                                    <span v-if="setMeal.sex==0">不限</span>
                                                    <span v-if="setMeal.sex==1">男</span>
                                                    <span v-if="setMeal.sex==2">女</span>
                                                </label>
                                            </td>
                                            <td><label :for="setMeal.id">{{setMeal.age}}</label></td>
                                            <td><label :for="setMeal.id">{{setMeal.price}}</label></td>
                                            <td><label :for="setMeal.id">{{setMeal.remark}}</label></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </template>
                    <div class="dialog-footer" slot="footer">
                        <el-button @click="dialogEditFormVisible = false">取消</el-button>
                        <el-button @click="handleEdit()" type="primary">确定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
<!--        修改标签结束-->

    </div>
</div>
</body>

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            activeName: 'first',//添加/编辑窗口Tab标签名称
            pagination: {//分页相关属性
                currentPage: 1,
                pageSize: 3,
                total: 100,
                queryString: null,
                queryDate:null
            },
            dataList: [],//列表数据
            //表单数据
            formData: {
                id: "",
                memberId: "",
                memberName: "",
                orderDate: "",
                orderType: "",
                orderStatus: "未到诊",
                setMealId: "",
                SetMealName: ""
            },//表单数据
            editForm:{},
            members: [],
            setMeals: [],
            orderDates: [],
            dialogFormVisible: false,//控制添加窗口显示/隐藏,
            dialogEditFormVisible: false//控制修改窗口显示/隐藏,
        },
        created() {
            this.findPage();
        },
        methods: {

            //添加
            handleAdd() {
                let form = this.formData;
                //发送ajax请求，提交表单，包括两部分：套餐基本信息、关联的检查组id数组
                if (form.memberId != "") {
                    if (form.orderDate != "") {
                        if (form.orderType != "") {
                            if (form.orderStatus != "") {
                                if (form.setMealId != "") {
                                    axios({
                                        url: "http://localhost:8080/order/add",
                                        method: "post",
                                        data: this.formData,
                                        headers: {
                                            token: localStorage.getItem("security_token")
                                        }
                                    }).then((result) => {
                                        let code = result.data.code;
                                        if (code == 200) {
                                            this.$message({
                                                type:"success",
                                                message:result.data.message
                                            }
                                        );
                                            this.dialogFormVisible = false;
                                            this.findPage();
                                        }else if (code == 504 || code == 505 || code==401){
                                            this.$message.error(result.data.message);
                                            location.href = "../login.html";
                                        }else {
                                            this.$message.error(result.data.message);
                                        }
                                    });//axios结束
                                } else {
                                    this.$message.error("请选择预约套餐");
                                }
                            } else {
                                this.$message.error("请选择预约状态");
                            }
                        } else {
                            this.$message.error("请选择预约类型");
                        }
                    } else {
                        this.$message.error("请选择预约日期");
                    }
                } else {
                    this.$message.error("请选择会员");
                }
            },
            //分页查询
            findPage() {
                let token = localStorage.getItem("security_token");
                axios({
                    url: "http://localhost:8080/order/findpage",
                    method: "post",
                    data: this.pagination,
                    headers: {
                        token: token
                    }
                }).then((result) => {
                    if (result.data.code == 200) {
                        this.pagination.total = result.data.data.total;
                        this.dataList = result.data.data.list;
                    } else if(result.data.code==504 || result.data.code==505 || result.data.code==401){
                        location.href = "../login.html";
                    }else if(result.data.code == 403) {
                        this.$message.error(result.data.message);
                        location.href = "show.html";
                    }else  {
                        this.$message.error(result.data.message);
                    }
                });
            },
            // 重置表单
            resetForm() {
                this.formData = {};
                this.formData.orderStatus="未到诊";
                this.editForm = {};
                this.activeName = 'first';
            },
            // 弹出添加窗口
            handleCreate() {
                //重置表单数据
                this.resetForm();
                this.dialogFormVisible = true;
                this.getMembers();
                this.getSetMeals();
                this.getOrderDates();
            },//点击新增弹窗事件结束
            //切换页码
            handleCurrentChange(currentPage) {
                let total = this.pagination.total;
                if (currentPage < 1) {
                    this.pagination.currentPage = 1;
                } else if (currentPage > (Math.ceil(total / 3))) {
                    this.pagination.currentPage = Math.ceil(total / 3);
                }
                this.pagination.currentPage = currentPage;//指定最新的页码
                this.findPage();
            },
            //回车事件绑定查询按钮事件
            handleFilter() {
                this.findPage();
            },
            //页码size change事件
            handleSizeChange(pageSize) {
                if (this.pagination.currentPage > Math.ceil(this.pagination.total / pageSize)) {
                    this.pagination.currentPage = Math.ceil(this.pagination.total / pageSize);
                }
                this.pagination.pageSize = pageSize;//指定最新的页码
                this.findPage();
            },
            //删除
            del(id) {
                if (confirm("确认取消？")) {
                    let token = localStorage.getItem("security_token");
                    axios({
                        url: "http://localhost:8080/order/del",
                        method: "post",
                        data: {id: id},
                        headers: {
                            token: token
                        }
                    }).then((result) => {
                        let code = result.data.code;
                        if (code == 200) {
                            this.$message({
                                    type:"success",
                                    message:result.data.message
                                }
                            );
                            this.dialogEditFormVisible = false;
                            this.findPage();
                        } else if (code == 401 || code == 504 || code == 505) {
                            this.$message.error(result.data.message);
                            location.href = "../login.html";
                        } else {
                            this.$message.error(result.data.message);
                        }
                    });
                }
            },
            //    修改弹窗
            edit(row) {
                //基础框架
                this.resetForm();
                this.dialogEditFormVisible = true;
                this.getMembers();
                this.getSetMeals();
                this.getOrderDates();
                let form = {
                    id: row.id,
                    memberId: row.memberId,
                    memberName: row.memberName,
                    orderDate: row.orderDate,
                    orderType: row.orderType,
                    orderStatus: row.orderStatus,
                    setMealId: row.setMealId,
                    SetMealName: row.SetMealName,
                    version:row.version
                }
                this.editForm = form;
            },
            //修改提交
            handleEdit() {
                let form = this.editForm;
                //发送ajax请求，提交表单，包括两部分：套餐基本信息、关联的检查组id数组
                if (form.memberId != "") {
                    if (form.orderDate != "") {
                        if (form.orderType != "") {
                            if (form.orderStatus != "") {
                                if (form.setMealId != "") {
                                    axios({
                                        url: "http://localhost:8080/order/edit",
                                        method: "post",
                                        data: this.editForm,
                                        headers: {
                                            token: localStorage.getItem("security_token")
                                        }
                                    }).then((result) => {
                                        let code = result.data.code;
                                        if (code == 200) {
                                            this.$message({
                                                    type:"success",
                                                    message:result.data.message
                                                }
                                            );
                                            this.dialogEditFormVisible = false;
                                            this.findPage();
                                        } else if (code == 400  || code==504 || code==505) {
                                            this.$message.error(result.data.message);
                                            location.href = "../login.html";
                                        }else {
                                            this.$message.error(result.data.message);
                                        }
                                    });//axios结束
                                } else {
                                    this.$message.error("请选择预约套餐");
                                }
                            } else {
                                this.$message.error("请选择预约状态");
                            }
                        } else {
                            this.$message.error("请选择预约类型");
                        }
                    } else {
                        this.$message.error("请选择预约日期");
                    }
                } else {
                    this.$message.error("请选择会员");
                }
            },
            //这三个是新增/修改时需要的下拉列表
            getMembers() {
                let token = localStorage.getItem("security_token");
                axios({
                    url: "http://localhost:8080/order/getMembers",
                    method: "post",
                    headers: {
                        token: token
                    }
                }).then((result) => {
                    if (result.data.code == 200) {
                        this.members = result.data.data;
                        console.log("下面是members");
                        console.log(this.members);
                    } else {
                        this.$message.error(result.data.message);
                    }
                });
            },
            getSetMeals() {
                let token = localStorage.getItem("security_token");
                axios({
                    url: "http://localhost:8080/order/getSetMeals",
                    method: "post",
                    headers: {
                        token: token
                    }
                }).then((result) => {
                    if (result.data.code == 200) {
                        this.setMeals = result.data.data;
                        console.log("下面是setMeals");
                        console.log(this.setMeals);
                    } else {
                        this.$message.error(result.data.message);
                    }
                });
            },
            getOrderDates() {
                let token = localStorage.getItem("security_token");
                axios({
                    url: "http://localhost:8080/order/getOrderDates",
                    method: "post",
                    headers: {
                        token: token
                    }
                }).then((result) => {
                    if (result.data.code == 200) {
                        this.orderDates = result.data.data;
                        console.log("getOrderDates");
                        console.log(this.getOrderDates);
                    } else {
                        this.$message.error(result.data.message);
                    }
                });
            }
        }//methods结束
    })
</script>
</html>
